<template>
    <Card dis-hover :bordered="false">
        <Row>
            <Col span="5">
                <div style="border:1px solid #ddd;padding:10px 20px;">
                    <Form>
                        <FormItem>
                            <Select placeholder="请先选择AI模型" v-model="params.ai_code" @on-clear="searchData" @on-change="searchData" clearable>
                                <Option v-for="item in modelList" :value="item.value" :key="item.value" >{{item.label}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem>
                            <Select placeholder="请选择预设话术" v-model="params.search_word" @on-clear="searchData" @on-change="searchData" clearable>
                                <Option v-for="item in searchList" :value="item" :key="item" >{{item}}</Option>
                            </Select>
                        </FormItem>
                    </Form>
                    <div>
                    <strong>AI提问排行榜</strong>
                        <br><br>
                        <Scroll :on-reach-bottom="handleReachBottom" :height="543">
                            <List>
                                <ListItem v-for="item in rankList" :key="item.value">{{item.name}}</ListItem>
                            </List>
                        </Scroll>
                    </div>
                </div>
                
            </Col>
            <Col span="19">
                <div>
                    <div style="padding:10px 20px;border:1px solid #ddd;padding:10px 20px;">
                        <Scroll :on-reach-bottom="handleReachBottom" :height="500">
                            <div v-for="item in QAList" :key="item.ques">
                                <p>问：{{item.ques}}</p>
                                <p>答：{{item.answer}}</p>
                            </div>
                        </Scroll>
                    </div>
                    <div style="border:1px solid #ddd;">
                        <Input type="textarea" placeholder="请再此处输入你的问题，按Ctrl + Enter发送" style="borde:none;" :rows="6" v-model="ques"/>
                        <div class="ivu-text-right ivu-mt-16 ivu-mb-16 ivu-mr-16"><Button type="primary">发送</Button></div>
                    </div>
                </div>
                
            </Col>
        </Row>
    </Card>
</template>
<script>
    export default {
        name: 'ai',
        data () {
            return{
                modelList:[
                    {label:'chatgpt',value:1},
                    {label:'文心一言',value:2}
                ],
                searchList:[
                    '写一篇小红书文案',
                    '写一篇关于白癜风的软文'
                ],
                params:{ai_code:'',search_word:''},
                rankList:[
                    {name:"张三",value:1},
                    {name:"李四",value:2},
                    {name:"王五",value:3}
                ],
                QAList:[
                    {ques:'写一篇小红书文案',answer:'我不会'},
                    {ques:'写一篇关于白癜风的软文',answer:'我不会'}
                ],
                ques:''
            }
            
        },
        methods:{
            searchData(){}
        }
    }
</script>
<style lang="less" scoped>
    :deep(.ivu-input){
        border: none;
        outline: none;
        resize:none;
    }
    :deep(.ivu-input:focus){
        border: none;
        outline: none;
        box-shadow: none;
    }
    :deep(::-webkit-scrollbar){								
        width: 6px;
    }
    :deep(::-webkit-scrollbar-track) {
        background-color:transparent;
    }
    :deep(::-webkit-scrollbar-thumb) {
        background-color: #fefefe;
        border-radius: 5px;
    }
    :deep(::-webkit-scrollbar-thumb:hover) {
        background-color: #999;
    }
</style>